<template>
	<view class="conent">
		<u-navbar :is-back="false" :safeAreaInsetTop="false" height="180rpx">
		</u-navbar>
		<view class="conent_box">
			<view class="register" v-if="status=='signin'">
				<u--text text="注册账号" bold size="24" lineHeight="70"></u--text>
				<u--input placeholder="请输入用户名" v-model="signin.username" border="bottom"
					customStyle="margin-bottom:30rpx;"></u--input>
				<u--input placeholder="请输入手机号/账号" v-model="signin.phoneNumber" type="number" border="bottom"
					customStyle="margin-bottom:30rpx;"></u--input>
				<u--input placeholder="请输入密码" v-model="signin.password" type="password" border="bottom"
					customStyle="margin-bottom:30rpx;"></u--input>
				<u--input placeholder="请再次输入密码" v-model="signin.repeatPassword" type="password" border="bottom"
					customStyle="margin-bottom:30rpx;"></u--input>
				<view style="position: relative;padding:12rpx 20rpx 30rpx 20rpx; border-bottom: 2rpx solid #DBDBDB;">
					<u--input placeholder="请输入验证码" v-model="signin.verificationCode" type="number" border="none"
						placeholder-class="placeholderClass" customStyle="width:70%;"></u--input>
					<u-button :text="codeName"
						customStyle="position:absolute;top:-10rpx;right:0;width:30%;border:none;background:none; color:#2D5150;"
						:disabled="disabled" @click="getCode"></u-button>
				</view>
				<u-button text="已有账号？立即登录"
					customStyle="border:none;background:none;color:#2D5150;justify-content: flex-start;"
					@click="alterStatus('login')"></u-button>
				<u-button text="注册" color="#07BFA5" @click="registerAccount"></u-button>
			</view>
			<view class="login" v-if="status=='login'">
				<u--text text="欢迎登录" bold size="24" lineHeight="70"></u--text>
				<u--input placeholder="请输入手机号/账号" v-model="login.phoneNumber" type="number" border="bottom"
					customStyle="margin-bottom:30rpx;"></u--input>
				<u--input placeholder="请输入密码" v-model="login.password" v-if="loginPattern=='1'" type="password"
					border="bottom" customStyle="margin-bottom:30rpx;"></u--input>
				<view style="position: relative;padding:12rpx 20rpx 30rpx 20rpx; border-bottom: 2rpx solid #DBDBDB;"
					v-if="loginPattern=='2'">
					<u--input placeholder="请输入验证码" v-model="login.verificationCode" type="number" border="none"
						placeholder-class="placeholderClass" customStyle="width:70%;"></u--input>
					<u-button :text="codeName"
						customStyle="position:absolute;top:-10rpx;right:0;width:30%;border:none;background:none;color:#2D5150;"
						:disabled="disabled" @click="getCode"></u-button>
				</view>
				<u-row customStyle="margin-bottom: 20px">
					<u-col span="6">
						<u-button :text="loginPattern=='1'?'手机验证码登录':'切换账号密码登录'"
							customStyle="border:none;background:none;color:#2D5150;justify-content: flex-start;"
							:disabled="disabled" @click="switchover"></u-button>
					</u-col>
					<u-col span="6">
						<u-button text="忘记密码" v-if="loginPattern=='1'"
							customStyle="border:none;background:none;color:#2D5150;justify-content: flex-end;"
							:disabled="disabled" @click="alterStatus('reset')"></u-button>
					</u-col>
				</u-row>
				<u-button text="没有账号？立即注册"
					customStyle="border:none;background:none;color:#2D5150;justify-content: flex-start;"
					@click="alterStatus('signin')"></u-button>
				<u-button text="登录" color="#07BFA5" @click="loginAccount"></u-button>
				<u-row customStyle="margin-top: 60rpx;margin-left:5%;width:90%;">
					<u-col span="3">
						<u-gap height="2" bgColor="#bbb"></u-gap>
					</u-col>
					<u-col span="1">
					</u-col>
					<u-col span="4">
						<u--text text="其他登录方式" color="#666666" align="center" size="14"></u--text>
					</u-col>
					<u-col span="1">
					</u-col>
					<u-col span="3">
						<u-gap height="2" bgColor="#bbb"></u-gap>
					</u-col>
				</u-row>
				<view style="margin:100rpx auto;width: 48px;height: 48px;">
					<u--image :showLoading="true" :src="wxImg" width="48px" height="48px" radius="50%"
						@click="wxLogin"></u--image>
					<!-- <button open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button> -->
				</view>
			</view>
			<view class="reset" v-if="status=='reset'">
				<u--text text="重置密码" bold size="24" lineHeight="70"></u--text>
				<u--input placeholder="请输入手机号/账号" v-model="reset.phoneNumber" type="number" border="bottom"
					customStyle="margin-bottom:30rpx;"></u--input>
				<u--input placeholder="请输入密码" v-model="reset.password" type="password" border="bottom"
					customStyle="margin-bottom:30rpx;"></u--input>
				<u--input placeholder="请再次输入密码" v-model="reset.repeatPassword" type="password" border="bottom"
					customStyle="margin-bottom:30rpx;"></u--input>
				<view style="position: relative;padding:12rpx 20rpx 30rpx 20rpx; border-bottom: 2rpx solid #DBDBDB;">
					<u--input placeholder="请输入验证码" v-model="reset.verificationCode" type="number" border="none"
						placeholder-class="placeholderClass" customStyle="width:70%;"></u--input>
					<u-button :text="codeName"
						customStyle="position:absolute;top:-10rpx;right:0;width:30%;border:none;background:none;color:#2D5150;"
						:disabled="disabled" @click="getCode"></u-button>
				</view>
				<u-button text="没有账号？立即注册"
					customStyle="border:none;background:none;color:#2D5150;justify-content: flex-start;"
					@click="alterStatus('signin')"></u-button>
				<u-button text="已有账号？立即登录"
					customStyle="border:none;background:none;color:#2D5150;justify-content: flex-start;"
					@click="alterStatus('login')"></u-button>
				<u-button text="重置" color="#07BFA5" @click="resetAccount"></u-button>
			</view>
		</view>
		<u-popup :show="wxbind" mode="center" closeable @close="close" @open="open"
			customStyle="border-radius:20rpx;width:70%;padding:50rpx;">
			<view class="wxbind">
				<u--text text="登录绑定" bold size="24" lineHeight="40"></u--text>
				<u--input placeholder="请输入手机号" v-model="wx.phoneNumber" type="number" border="bottom"
					customStyle="margin-bottom:30rpx;"></u--input>
				<view style="position: relative;padding:12rpx 20rpx 30rpx 20rpx; border-bottom: 2rpx solid #DBDBDB;">
					<u--input placeholder="请输入验证码" v-model="wx.verificationCode" type="number" border="none"
						placeholder-class="placeholderClass" customStyle="width:60%;"></u--input>
					<u-button :text="codeName"
						customStyle="position:absolute;top:-10rpx;right:0;width:30%;border:none;background:none;color:#2D5150;"
						:disabled="disabled" @click="getCode"></u-button>
				</view>
				<u-button text="绑定" color="#07BFA5" @click="bindwxphone" customStyle="margin-top:20rpx;"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	import router from '@/api/router';
	import {
		verificationCode,
		register,
		loginByPassword,
		loginByVerificationCode,
		loginByWX,
		updatePassword
	} from "@/api/pages/login.js"
	const status = ref("login") //signin注册；login登录；reset重置密码
	const wxImg = ref("https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/icon/wxImg.png")
	const signin = ref({
		username: "",
		phoneNumber: "",
		password: "",
		repeatPassword: "",
		verificationCode: ""
	})
	const login = ref({
		phoneNumber: "",
		password: "",
		verificationCode: ""
	})
	const reset = ref({
		phoneNumber: "",
		password: "",
		repeatPassword: "",
		verificationCode: ""
	})
	const wx = ref({
		code: "",
		openId: "",
		phoneNumber: "",
		verificationCode: ""
	})
	const registerDate = ref({})
	const loginPattern = ref("1") //1账号密码登录 2验证码登录
	const disabled = ref(false)
	const timer = ref(null)
	const codeName = ref("获取验证码")
	watch(
		() => loginPattern,
		(val) => {
			console.log("选择登录类型", val.value);
		}, {
			deep: true,
			immediate: true,
		}
	)
	onMounted(() => {
		console.log();
	})
	const switchover = () => {
		loginPattern.value == '1' ? loginPattern.value = '2' : loginPattern.value = '1'
	}
	const alterStatus = (e) => {
		status.value = e
	}
	const getVerificationCode = async (phoneNumber) => {
		const res = await verificationCode(phoneNumber).then()
		loginSuccess(res)
		console.log(res);
	}
	const registerAccount = async () => {
		const res = await register(signin.value).then()
		loginSuccess(res)
		console.log(res);
	}
	const loginAccount = () => {
		console.log("loginByPassword===");
		loginPattern.value == '1' ? passwordLogin() : verificationCodeLogin()
	}
	const passwordLogin = async () => {
		const res = await loginByPassword(login.value).then()
		loginSuccess(res)
		console.log(res);
	}
	const verificationCodeLogin = async () => {
		const res = await loginByVerificationCode(login.value).then()
		loginSuccess(res)
		console.log(res);
	}
	const bindwxphone = async () => {
		const res = await loginByWX(wx.value).then()
		console.log('微信登录返回信息===', res);
		if (res.code == 999) {
			wxbind.value = true
			wx.value.code = ""
			wx.value.openId = res.result.openId
			return
		}
		loginSuccess(res)
	}
	const resetAccount = async () => {
		const res = await updatePassword(login.value).then()
		loginSuccess(res)
		console.log(res);
	}
	const wxbind = ref(false)
	const wxLogin = () => {
		console.log("微信登录===");
		status.value = 'wx'
		accredit()
	}
	const close = () => {
		wxbind.value = false
		uni.navigateTo({
			url: "/pages/login/login"
		})
		console.log("close===");
	}
	const open = () => {
		console.log("打开===");
	}
	const accredit = () => {
		console.log("授权===");
		uni.getUserInfo({
			desc: '登录的数据',
			success(ures) {
				console.log(ures, '返回的用户信息');
				uni.login({
					provider: 'weixin', //使用微信登录
					success(lres) {
						console.log(lres, '请求微信登录返回的数据');
						wx.value.code = lres.code
						//接口逻辑需要先传code，通过就直接登录，未通过获取返回数据openid，手机号，验证码进行微信和号码绑定
						bindwxphone()
					}
				});
			}
		})
	}
	const getCode = () => {
		let phone = ""
		console.log(status.value);
		if (status.value == "signin") {
			phone = signin.value.phoneNumber
		} else if (status.value == "login") {
			phone = login.value.phoneNumber
		} else if (status.value == "reset") {
			phone = reset.value.phoneNumber
		} else if (status.value == "wx") {
			phone = wx.value.phoneNumber
		}
		if (!phone) {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return
		}
		if (!/^1[3456789]{1}\d{9}$/gi.test(phone)) {
			uni.showToast({
				title: '请检查手机号',
				icon: 'none'
			})
			return false;
		}
		setTimer();
	}
	const setTimer = () => {
		// signin注册；login登录；reset重置密码
		if (status.value == "signin") {
			getVerificationCode(signin.value.phoneNumber)
		} else if (status.value == "login") {
			getVerificationCode(login.value.phoneNumber)
		} else if (status.value == "reset") {
			getVerificationCode(reset.value.phoneNumber)
		} else if (status.value == "wx") {
			getVerificationCode(wx.value.phoneNumber)
		}
		let num = 60;
		disabled.value = true;
		timer.value = setInterval(() => {
			if (num > 1) {
				num--;
				codeName.value = num + 's';
			} else {
				codeName.value = '获取验证码';
				disabled.value = false;
				clearInterval(timer.value)
			}
		}, 1000)
	}
	const loginSuccess = (res) => {
		if (res.code == 200) {
			uni.showToast({
				title: res.message,
				icon: 'success',
			});
			uni.setStorageSync("accessToken", res.result.accessToken);
			// uni.setStorageSync("account", res.result);
			console.log(res.result);
			uni.setStorage({
				key: "account",
				data: res.result,
				success(res) {
					console.log('数据存储成功');
				},
				fail(err) {
					console.error('数据存储失败', err);
				}
			})
			setTimeout(() => {
				uni.navigateTo({
					url: "/pages/index/index"
				})
			}, 2000)
		}
	}
	const forget = () => {
		console.log("忘记密码===");
	}
</script>

<style lang="scss" scoped>
	:deep(.u-navbar__content__left) {
		display: none;
	}

	.conent_box {
		margin-top: 240rpx;

		.login,
		.register,
		.reset,
		.wxbind {
			width: 80%;
			position: relative;
			top: -80rpx;
			left: 10%;
			// background-color: skyblue;
		}
	}
</style>